import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import {
  Form,
  Drawer,
  Button,
  List,
  Avatar,
} from 'antd';

const namespace = 'afterSale';

function AfterSaleAddDrawer(props) {

  const onClose = () => {
    saveDrawerFlag(false);
  };

  const saveDrawerFlag = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveDrawerFlag`,
      payload: params,
    });
  };

  const saveDisplay = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveDisplay`,
      payload: params,
    });
  };

  const saveChildType = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveChildType`,
      payload: params,
    });
  };

  const saveSupportType = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveSupportType`,
      payload: params,
    });
  };

  const saveSelectRecord = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveSelectRecord`,
      payload: params,
    });
  };

  const handleAfterSaleAdd = value => {
    saveSelectRecord({});
    saveDrawerFlag(false);
    saveChildType("add");
    saveDisplay("none");
    saveSupportType(value);
  };

  return (
    <Drawer
      width={680}
      onClose={onClose}
      visible={props.drawerFlag}
    >
      <List itemLayout="vertical"
        style={{paddingTop:30}}
        size="large"
        // split={false}
        >
        <List.Item
            extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1000")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            // avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            title="问题申请单"
            description={<span style={{color:'red'}}>【提示:标准化产品的日常咨询、维护类工作】</span>}
          />

        </List.Item>
        <List.Item
          extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1100")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            title="功能开发及配置需求申请单"
            description={<span style={{color:'red'}}>【提示:标准化产品的软件开发配置、工作评估、现场支撑、培训、帐号增删改等工作】</span>}
          />
        </List.Item>
        <List.Item
          extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1200")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            title="故障申请单"
          />

        </List.Item>
        <List.Item
          extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1300")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            title="产品升级流程单"
          />
        </List.Item>
        <List.Item
          extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1400")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            title="ICT售中支撑申请单"
          />
        </List.Item>
        <List.Item
          extra={
            <Button className="margin-left" type="primary" onClick={()=>{handleAfterSaleAdd("1500")}}>
              我要申请
            </Button>
          }>
          <List.Item.Meta
            title="结算申请单"
          />
        </List.Item>
      </List>

    </Drawer>
  );
}

export default connect(({ afterSale }) => ({
  drawerFlag:afterSale.drawerFlag,
}))(Form.create()(AfterSaleAddDrawer)
);

